<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>？？？？？</title>
	<link rel="stylesheet" href="css/index.css">
    <audio id="myaudio" src="images/芒种.mp3" controls="controls" autoplay loop="true" hidden="true">    </audio>
    <style>
        .zhendimage{
            position: relative;
        }
        body
        {
            background-color:#b0c4de;
        }
    </style>
    <script>
        var rector= 3,stopit= 0,a=1;
        function init(which){
            stopit=0;
            zhend=which;
            zhend.style.left=0;
            zhend.style.top=0;
        }
        function rattleimage(){
            if((!document.all&&!document.getElementById)||stop==1)
                return
            if(a==1){
                zhend.style.top=parseInt(zhend.style.top)+rector;
            }
            else if(a==2){
                zhend.style.left=parseInt(zhend.style.left)+rector;
            }
            else if(a==3){
                zhend.style.top=parseInt(zhend.style.top)-rector;
            }
            else {
                zhend.style.left=parseInt(zhend.style.left)-rector;
            }
            if(a<4)
                a++
            else
                a=1;
            setTimeout("rattleimage()",50);
        }
        function stoprattle(which){
            stopit=1;
            which.style.left=0;
            which.style.top=0;
        }
    </script>
	
</head>

<body>

<!-- 头部 -->
	<div class="header">
		<div class="logo">
            <img src="image/logo.png" class="zhendimage" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)"/>
            <img src="image/logo.png" alt="logo.png">
        </div>

		<div class="nav">
			<ul>
				<li>首页</li>
				<li>动态壁纸</li>
				<li>视频壁纸</li>
				<li>静态壁纸</li>
                <li>登录</li>
		</div>

	</div>
	<!-- 主体 -->
    <div class="main">
        <div class="top">
            <img src="image/1.jpg" height="405" width="720"/></div>
        <!-- 遮罩层 -->
        <div class="topLayer">

        </div>
        <!-- 最上层的内容 -->
        <div class="topLayer-top">
            <div class="word">WELCOME TO THIS WEB!
            I'LL SHOW YOU SOMETHING FUN!</div>
            <button >关注我们</button>
        </div>
        <div class="search">

            <input type="text" value="请输入..." id="txt">
            <p class="inset"></p>

        </div>
        <div class="topLayer-top">
            <button >搜索</button>
        </div>


        <div class="block">
            <div class="box_big ">
                <div class="box">
                    <img src="image/001 (1).jpg" height="1200" width="1920"/></div>
                <div class="box">
                    <img src="image/001 (2).jpg" height="1200" width="1920"/></div>
                <div class="box">
                    <img src="image/001 (3).jpg" height="1200" width="1920"/></div>
                <div class="box">
                    <img src="image/001 (1).jpg" height="1200" width="1920"/></div>

            </div>
            <div class="spot">
                <div class="spot_list">1</div>
                <div class="spot_list">2</div>
                <div class="spot_list">3</div>



            </div>
            <div class="btn">
                <div class="left_btn">
                    <span style="color:darkblue"> < </span></div>
                <div class="right_btn">
                    <span style="color:darkblue"> > </span></div>
            </div>
        </div>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .block {
                width: 1920px;
                height: 1200px;
                border: 1px solid black;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
                box-sizing: border-box;
            }

            .box_big {
                position: absolute;
                width: 7680px;
                height: 1200px;

            }

            .nav {
                transition: margin-left 0.5s linear;
            }

            .box {
                width: 1920px;
                height: 1200px;
                float: left;
            }

            img {
                width: 100%;
                height: 100%;
            }

            .spot {
                position: absolute;
                width: 100%;
                text-align: right;
                bottom: 5px;
            }

            .spot_list {

                width: 30px;
                height: 30px;
                font-size: 20px;
                text-align: center;
                border: 1px solid gray;
                border-radius: 5px;
                line-height: 30px;
                font-weight: bolder;
                margin: 10px;
                display: inline-block;
                background: rgba(255, 255, 255, 0.3);
            }

            .btn {
                width: 100%;
                height: 300px;
                position: absolute;
                margin: 0 auto;
                top: 300px;
            }

            .left_btn, .right_btn {
                width: 30px;
                height: 600px;
                z-index: 15;
                background: rgba(255, 255, 255, 0.3);
                text-align: center;
                line-height: 600px;
                border-radius: 10px;

            }

            .left_btn {
                float: left;
            }

            .right_btn {
                float: right;
            }
            input,button{
                border: 0 none;
                padding: 0;
                outline-style: none;
            }
            .search{
                margin: 100px auto;
                width: 258px;
                height: 40px;
                overflow: hidden;
            }
            .search input{
                float: left;
                width: 208px;
                height: 40px;
                background: url("left.jpg") no-repeat;

                padding-left:8px;
                color: black;
            }
            .search button{
                float: left;
                height: 40px;
                width: 42px;
                background: url("right.jpg") no-repeat;
                cursor: pointer;
            }
            p.inset {border-style:inset;}

        </style>
        <script>
            //首先获取元素，这里获取了所有需要的元素。
            var box = document.getElementsByClassName("box_big")[0];
            var spot = document.getElementsByClassName("spot_list");
            var block = document.getElementsByClassName("block")[0];
            var left_btn = document.getElementsByClassName("left_btn")[0];
            var right_btn = document.getElementsByClassName("right_btn")[0];
            var time = null;
            spot[0].style.background = "rgba(91,91,91,0.8)";
            var count = 0;
            showtime();
            //鼠标进入计时器停止
            block.onmouseenter = function () {
                clearInterval(time);
            };
            //鼠标出来计时器打开
            block.onmouseleave = function () {
                showtime();
            };
            //点的事件
            for (var i = 0; i < spot.length; i++) {
                spot[i].index = i;
                spot[i].onmouseenter = function () {
                    spot[count].style.background = "rgba(255, 255, 255, 0.3)";
                    this.style.background = "rgba(91,91,91,0.8)";
                    count = this.index;
                    box.style.marginLeft = (count * -1920) + "px";
                }

            }
            //图片左边划
            right_btn.onclick = function () {
                mate();
            };
            //图片右边划
            left_btn.onclick = function () {
                spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";
                count--;
                if (count < 0) {
                    box.className = "box_big";
                    count = box.children.length - 2;
                    box.style.marginLeft = "-3500px";
                }
                setTimeout(function () {
                    box.className = "box_big nav";
                    box.style.marginLeft = (-1920 * count) + "px";
                    spot[count].style.backgroundColor = "rgba(91,91,91,0.8)";
                }, 1);
            };
            //计时器
            function showtime() {
                time = setInterval(function () {
                    mate();
                }, 1500);
            }
            //正常滚动
            function mate() {
                box.className = "box_big nav";
                spot[count].style.background = "rgba(255, 255, 255, 0.3)";
                count++;
                spot[count > box.children.length - 2 ? 0 : count].style.background = "rgba(91,91,91,0.8)";
                box.style.marginLeft = (count * -1920) + "px";
                setTimeout(function () {
                    if (count > box.children.length - 2) {
                        count = 0;
                        box.className = "box_big";
                        box.style.marginLeft = "0px"
                    }
                }, 500)
            }

        </script>
</body>
        <div class="middle">
            <div class="pictures" id="J_pictures">
                <ul class="tabs J_tabs">
                    <li><a class="active" href="#photo">摄影</a></li>
                    <li><a href="#life">生活</a></li>
                    <li><a href="#food">美食</a></li>
                    <li><a href="#people">人物</a></li>
                    <li><a href="#movie">影视</a></li>
                    <li><a href="#anime">动漫</a></li>
                    <li><a href="#game">游戏</a></li>
                    <li><a href="#travel">旅游</a></li>
                    <li><a href="#science">科学</a></li>
                    <li><a href="#more">更多</a></li>
                </ul>
            </div>

            <div class="m-top">
                <div class="commen weibo">
                    <img src="image/weibo.png">
                    <apon class="comm">新浪微博</apon>
                </div>
                <div class="commen weixin">
                    <img src="image/weixin.png">
                    <apon class="comm">微信</apon>
                </div>
                <div class="commen QQ">
                    <img src="image/QQ.png" height="120" width="120"/>
                    <apon class="comm">QQ</apon>
                </div>


                <div class="clear"></div>
            </div>
            <div class="m-middle">
                "记录美好生活,<br>在旅途中感受自然。"
            </div>
            <div class="m-bottom">
                <div class="m-com">
                    <img src="image/03-01.jpg">
                    <div class="des1">摄影</div>
                    <div class="des2">更多》</div>
                </div>
                <div class="m-com">
                    <img src="image/03-02.jpg">
                    <div class="des1">生活</div>
                    <div class="des2">更多》</div>
                </div>
                <div class="m-com">
                    <img src="image/03-03.jpg">
                    <div class="des1">美食</div>
                    <div class="des2">更多》</div>
                </div>
                <div class="m-com">
                    <img src="image/03-04.jpg">
                    <div class="des1">人物</div>
                    <div class="des2">更多》</div>
                </div>
                <div class="m-com">
                    <img src="image/03-05.jpg">
                    <div class="des1">影视</div>
                    <div class="des2">更多》</div>
                </div>
                <div class="m-com">
                    <img src="image/03-06.jpg">
                    <div class="des1">运动</div>
                    <div class="des2">更多》</div>
                </div>
            </div>
            <style>/* ul li以横排显示 */

            /* 所有class为menu的div中的ul样式 */
            div.pictures ul
            {
                list-style:none; /* 去掉ul前面的符号 */
                margin: 0px; /* 与外界元素的距离为0 */
                padding: 0px; /* 与内部元素的距离为0 */
                width: auto; /* 宽度根据元素内容调整 */
            }
            /* 所有class为menu的div中的ul中的li样式 */
            div.pictures ul li
            {
                float:left; /* 向左漂移，将竖排变为横排 */
            }
            /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
            div.pictures ul li a, div.menu ul li a:visited
            {
                background-color: #465c71; /* 背景色 */
                border: 1px #4e667d solid; /* 边框 */
                color: #dde4ec; /* 文字颜色 */
                display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
                line-height: 1.35em; /* 行高 */
                padding: 4px 20px; /* 内部填充的距离 */
                text-decoration: none; /* 不显示超链接下划线 */
                white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
            }
            /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
            div.pictures ul li a:hover
            {
                background-color: #bfcbd6; /* 背景色 */
                color: #465c71; /* 文字颜色 */
                text-decoration: none; /* 不显示超链接下划线 */
            }
            /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
            div.pictures ul li a:active
            {
                background-color: #465c71; /* 背景色 */
                color: #cfdbe6; /* 文字颜色 */
                text-decoration: none; /* 不显示超链接下划线 */
            }
            </style>
            <script><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
            </script>
        </div>
<body>
    <div class="m-finnle">

    </div>
    <div class="block1">
        <div class="box_big1 ">
            <div class="box1">
                <img src="image/002.jpg" height="1000" width="4215"/></div>
            <div class="box1">
                <img src="image/002.jpg" height="1000" width="4215"/></div>
            <div class="box1">
                <img src="image/002.jpg" height="1000" width="4215"/></div>
            <div class="box1">
                <img src="image/002.jpg" height="1000" width="4215"/></div>


        </div>
        <div class="spot1">
            <div class="spot_list1">1</div>
            <div class="spot_list1">2</div>
            <div class="spot_list1">3</div>





        </div>
        <div class="btn1">
            <div class="left_btn1">
                <span style="color:darkblue"> < </span></div>
            <div class="right_btn1">
                <span style="color:darkblue"> > </span></div>
        </div>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block1 {
            width: 2100px;
            height: 1000px;
            border: 1px solid black;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
        }

        .box_big1 {
            position: absolute;
            width: 4215px;
            height: 1000px;

        }

        .nav1 {
            transition: margin-left 0.5s linear;
        }

        .box1 {
            width: 4215px;
            height: 1000px;
            float: left;
        }

        img1 {
            width: 100%;
            height: 100%;
        }

        .spot1 {
            position: absolute;
            width: 100%;
            text-align: right;
            bottom: 5px;
        }

        .spot_list1 {

            width: 30px;
            height: 30px;
            font-size: 20px;
            text-align: center;
            border: 1px solid gray;
            border-radius: 5px;
            line-height: 30px;
            font-weight: bolder;
            margin: 10px;
            display: inline-block;
            background: rgba(255, 255, 255, 0.3);
        }

        .btn1 {
            width: 100%;
            height: 300px;
            position: absolute;
            margin: 0 auto;
            top: 300px;
        }

        .left_btn1, .right_btn1 {
            width: 30px;
            height: 600px;
            z-index: 15;
            background: rgba(255, 255, 255, 0.3);
            text-align: center;
            line-height: 600px;
            border-radius: 10px;

        }

        .left_btn1 {
            float: left;
        }

        .right_btn1 {
            float: right;
        }

    </style>
    <script>
        //首先获取元素，这里获取了所有需要的元素。
        var box = document.getElementsByClassName("box_big")[0];
        var spot = document.getElementsByClassName("spot_list");
        var block = document.getElementsByClassName("block")[0];
        var left_btn = document.getElementsByClassName("left_btn")[0];
        var right_btn = document.getElementsByClassName("right_btn")[0];
        var time = null;
        spot[0].style.background = "rgba(91,91,91,0.8)";
        var count = 0;
        showtime();
        //鼠标进入计时器停止
        block.onmouseenter = function () {
            clearInterval(time);
        };
        //鼠标出来计时器打开
        block.onmouseleave = function () {
            showtime();
        };
        //点的事件
        for (var i = 0; i < spot.length; i++) {
            spot[i].index = i;
            spot[i].onmouseenter = function () {
                spot[count].style.background = "rgba(255, 255, 255, 0.3)";
                this.style.background = "rgba(91,91,91,0.8)";
                count = this.index;
                box.style.marginLeft = (count * -1920) + "px";
            }

        }
        //图片左边划
        right_btn.onclick = function () {
            mate();
        };
        //图片右边划
        left_btn.onclick = function () {
            spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";
            count--;
            if (count < 0) {
                box.className = "box_big";
                count = box.children.length - 2;
                box.style.marginLeft = "-3500px";
            }
            setTimeout(function () {
                box.className = "box_big nav";
                box.style.marginLeft = (-1920 * count) + "px";
                spot[count].style.backgroundColor = "rgba(91,91,91,0.8)";
            }, 1);
        };
        //计时器
        function showtime() {
            time = setInterval(function () {
                mate();
            }, 1500);
        }
        //正常滚动
        function mate() {
            box.className = "box_big nav";
            spot[count].style.background = "rgba(255, 255, 255, 0.3)";
            count++;
            spot[count > box.children.length - 2 ? 0 : count].style.background = "rgba(91,91,91,0.8)";
            box.style.marginLeft = (count * -1920) + "px";
            setTimeout(function () {
                if (count > box.children.length - 2) {
                    count = 0;
                    box.className = "box_big";
                    box.style.marginLeft = "0px"
                }
            }, 500)
        }

        //首先获取元素，这里获取了所有需要的元素。
        var box1 = document.getElementsByClassName("box_big1")[0];
        var spot1 = document.getElementsByClassName("spot_list1");
        var block1 = document.getElementsByClassName("block1")[0];
        var left_btn1 = document.getElementsByClassName("left_btn1")[0];
        var right_btn1 = document.getElementsByClassName("right_btn1")[0];
        var time1 = null;
        spot1[0].style.background = "rgba(91,91,91,0.8)";
        var count = 0;
        showtime();
        //鼠标进入计时器停止
        block1.onmouseenter = function () {
            clearInterval(time);
        };
        //鼠标出来计时器打开
        block1.onmouseleave = function () {
            showtime();
        };
        //点的事件
        for (var i = 0; i < spot.length; i++) {
            spot1[i].index = i;
            spot1[i].onmouseenter = function () {
                spot1[count].style.background = "rgba(255, 255, 255, 0.3)";
                this.style.background = "rgba(91,91,91,0.8)";
                count = this.index;
                box1.style.marginLeft = (count * -1070) + "px";
            }

        }
        //图片左边划
        right_btn1.onclick = function () {
            mate();
        };
        //图片右边划
        left_btn1.onclick = function () {
            spot1[count].style.backgroundColor = "rgba(255,255,255,0.3)";
            count1--;
            if (count < 0) {
                box1.className = "box_big";
                count = box.children.length - 2;
                box1.style.marginLeft = "-3500px";
            }
            setTimeout(function () {
                box1.className = "box_big nav";
                box1.style.marginLeft = (-1070 * count) + "px";
                spot1[count].style.backgroundColor = "rgba(91,91,91,0.8)";
            }, 1);
        };
        //计时器
        function showtime() {
            time1 = setInterval(function () {
                mate();
            }, 5000);
        }
        //正常滚动
        function mate() {
            box1.className = "box_big nav";
            spot1[count].style.background = "rgba(255, 255, 255, 0.3)";
            count++;
            spot1[count > box.children.length - 2 ? 0 : count].style.background = "rgba(91,91,91,0.8)";
            box1.style.marginLeft = (count * -1070) + "px";
            setTimeout(function () {
                if (count > box.children.length - 2) {
                    count = 0;
                    box1.className = "box_big";
                    box1.style.marginLeft = "0px"
                }
            }, 2000)
        }
    </script>
        <div class="clear"></div>





	<!-- 底部 -->
<div class="footer">
    © 2020 yichen.com  闽233备88888888号
</div>
</body>
</html>